<template>
    <div class="searchBar">
        <div class="search" v-if="!isReal">
            <van-icon name="search" />
            <span class="placeholder">uni-app 自定义组件</span>
        </div>
        <div class="real" v-else>
            <van-search @input="inputValue" :show-action="isShowCancel" :placeholder="hotword" @focus="searchFocns"
                @search="onSearch" @cancel="onCancel" @clear="searchClear" :value="value" />
        </div>
    </div>
</template>
<script>
export default {
    props: {
        isReal: Boolean,
        hotword: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            searchTxt: '',
            isShowCancel: false,
        }
    },
    methods: {
        searchFocns() {
            this.isShowCancel = true;
            this.$emit('searchFocns', 2);
        },
        onSearch() {
            // 搜索
            if (this.value == '') {
                this.value = this.hotword;
            }
            this.$emit('onSearch', 3, this.value);
        },
        onCancel() {
            // 取消
            this.isShowCancel = false;
            this.$emit('searchFocns', 1);
        },
        searchClear() {
            this.$emit('searchFocns', 2);
        },
        inputValue(val) {
            this.$emit('input', val);
        }
    }
}
</script>
<style lang="less" scoped>
.searchBar {
    padding: 10px;

    .search {
        border-radius: 20px;
        background: #f7f8fa;
        height: 34px;
        padding: 0 10px;
        font-size: 12px;
        line-height: 34px;

        .van-icon {
            color: #999;
            position: relative;
            top: 2px;
        }

        .placeholder {
            color: #999;
            margin-left: 5px;
        }
    }
}

/deep/.van-search {
    /deep/.van-icon-clear {
        z-index: 99999;
        padding-right: 30PX;
    }
}
</style>